<template>
    <section class="form-container">
        <el-form :inline="true" size="mini" class="form-filter">
            <el-form-item>
                <el-button @click="showInsert({parentId:0})" icon="el-icon-plus">添加顶级分类</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="dataSource"
                border
                stripe
                lazy
                :load="load"
                :cell-class-name="getCellIndex"
                row-key="id"
                @cell-click="tableDbEdit"
                ref="table1"
                :header-cell-style = "headerCellStyle"
            >

                <el-table-column prop="goodsClassName" label="分类名称"/>
                <el-table-column prop="id" label="ID"/>
                <el-table-column prop="image" label="图片">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.image" fit="fit">
                            <div slot="error" class="image-slot"
                                 style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column property="sort" label="排序" width="80px">
                    <template #default="scope">
                    <span v-show="!(scope.row.index === coordinate.row && scope.column.index === coordinate.column)">
                      {{ scope.row.sort }}
                    </span>
                        <el-input
                            v-show="scope.row.index === coordinate.row && scope.column.index === coordinate.column"
                            ref="sort"
                            v-model="scope.row.sort"
                            size="mini"
                            autofocus
                            @change="submitTableEdit(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80px">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitch(scope.row.status,scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="updateName" label="更新人" width="80px"/>
                <el-table-column prop="updateTime" label="更新时间" width="160px"/>

                <el-table-column fixed="right" label="操作" width="260">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showInsert(scope.row)">添加子类
                        </el-button>

                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <Update ref="updateRef" @refresh="reloadList"/>
        </div>
    </section>
</template>
<script>
import {GoodsClassApi} from '@/api/mall/goodsClass'
import Update from './Update.vue'

export default {
    name: 'MallGoodsClassList',
    components: {Update},
    data() {
        return {
            dataSource: [],
            coordinate: {column: -1, row: -1},
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.reloadList(0)
    },
    methods: {
        reloadList(parentId) {
            GoodsClassApi.getListByParentId(parentId).then((response) => {
                if (parentId === 0) {
                    this.dataSource = response
                } else {
                    this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, parentId, response)
                }
            })
        },
        //展开子类
        load(tree, treeNode, resolve) {
            GoodsClassApi.getListByParentId(tree.id).then((response) => {
                resolve(response)
            })
        },

        // 添加角色
        showInsert(data) {
            const newData = {
                'id': 0,
                'parentId': data.id,
                'goodsTypeId': data.goodsTypeId
            }

            this.$refs['updateRef'].showUpdate(newData)
        },
        // 修改角色
        showUpdate(data) {
            this.$refs['updateRef'].showUpdate(data)
        },
        // 删除角色
        handleDelete(id) {
            const that = this
            GoodsClassApi.delete(id).then((response) => {
                that.reloadList(0)
            })
        },

        // 修改状态
        statusSwitch(val, id) {
            const params = {
                id: id,
                status: val
            }

            GoodsClassApi.updateStatus(params).then((response) => {
            })
        },
        // 修改排序
        submitTableEdit(row) {
            this.coordinate.column = -1
            this.coordinate.row = -1
            const params = {
                id: row.id,
                sort: row.sort
            }
            GoodsClassApi.updateSort(params).then((response) => {
            })
        },
        getCellIndex({row, column, rowIndex, columnIndex}) {
            row.index = rowIndex
            column.index = columnIndex
        },
        tableDbEdit(row, column) {
            this.coordinate.row = row.index
            this.coordinate.column = column.index
        }
    }
}

</script>

<style>

</style>
